<template>
  <div class="pages-container">

    <!-- 搜索框 Or 工具框 -->
    <a-form class="pages-tools-box" :form="form" @submit="getSearch">
      <a-row>
        <a-col :span="24" :style="{ textAlign: 'right' }">
          <a-button :style="{ marginLeft: '8px' }" @click="visible = true">发送站内信</a-button>
        </a-col>
      </a-row>
    </a-form>

    <!-- 表格 -->
    <div class="pages-content">
      <a-table :columns="columns" :data-source="data" :pagination="false" rowKey="id" :loading="tableLoading">
        <a-space slot="user" slot-scope="row">{{ row.user && row.user.name }}</a-space>
      </a-table>
    </div>

    <!-- 分页 -->
    <a-pagination class="pagination" show-quick-jumper :default-current="current_page" :total="total"
                  @change="changePages"/>

    <!-- 发送站内信 -->
    <a-modal
        title="发送站内信"
        :visible="visible"
        @ok="handleOk"
        @cancel="visible = false"
    >
      <p>
        <label style="width: 80px; display: inline-block">发送身份：</label>
        <a-select style="width: 70%" v-model="sendType">
          <a-select-option value="1">
            全部用户
          </a-select-option>
          <a-select-option value="2">
            全部企业HR
          </a-select-option>
          <a-select-option value="3">
            全部服务商顾问
          </a-select-option>
          <a-select-option value="4">
            某一用户
          </a-select-option>
        </a-select>
      </p>
      <p v-if="sendType == 4">
        <label style="width: 80px; display: inline-block">用户ID：</label>
        <a-input v-model="sendUser" style="width: 80%"></a-input>
      </p>
      <p>
        <label style="width: 80px; display: inline-block">发送内容：</label>
        <a-textarea v-model="sendContent" style="width: 80%"></a-textarea>
      </p>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {title: 'ID', dataIndex: 'id'},
  {title: '用户', scopedSlots: {customRender: 'user'}},
  {title: '内容', dataIndex: 'content'},
  {title: '发送时间', dataIndex: 'createAt'},
];

import config from "../../tools/config";

export default {
  name: "Message.vue",
  data() {
    return {
      visible: false,
      sendType: "1",
      sendContent: "",
      sendUser: "",
      // 公用配置
      Config: {},
      // 分页数据
      current_page: 1,
      total: 100,
      // table数据
      tableLoading: false,
      columns,
      data: [],
      // 搜索表单
      form: this.$form.createForm(this),
      // other
      UserStateList: [],
    };
  },
  created() {
    this.Config = config
    this.getData()
  },
  methods: {

    /**
     * 进行搜索
     * @param e
     */
    getSearch(e) {
      e.preventDefault();
      this.form.validateFields((error) => {
        if (!error) {
          this.getData(1)
        }
      });
    },

    /**
     * 请求Table数据
     * @param pages
     */
    getData(pages = 1) {
      this.tableLoading = true
      this.Http.get('/admin/message/index', {
        page: pages,
        ...this.form.getFieldsValue()
      }).then(res => {
        this.tableLoading = false
        if (res.code === 1) {
          this.data = res.data.data
          this.current_page = res.data.current_page
          this.total = res.data.total
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => {
        this.tableLoading = false
      })
    },

    /**
     * 切换分页时
     * @param event
     */
    changePages(event) {
      this.getData(event)
    },

    /**
     * 清空搜索项
     */
    handleReset() {
      this.form.resetFields();
      this.getData()
    },

    handleOk() {
      if (this.sendType == 4 && !this.sendUser) {
        this.$message.error("请输入发送用户ID")
        return
      }
      if (!this.sendContent) {
        this.$message.error("请输入发送内容")
        return
      }
      this.Http.post("/admin/message/create", {
        type: this.sendType,
        content: this.sendContent,
        user: this.sendType == 4 ? this.sendUser : ''
      }).then(res => {
        if (res.code == 1) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      })
    },

  },
}
</script>

<style scoped>

</style>
